<template>
  <div class="main">
    <div class="school-wrapper">
      <headerBack></headerBack>
      <div class="serach-box flex-h">
        <span></span>
        <input class="flex1" placeholder="请输入意向学校" type="text" oninput="if(value.length>30)value=value.slice(0,30)" v-on:blur="commonJs.blurAdjust" v-model="searchName" @keypress="searchBtn" />
      </div>
      <article class="country" v-show="countryList.length > 0" v-cloak>
        <scrollerEdit lock-x @on-scroll="onScroll" ref="listview">
          <div>
            <ul class="country-list">
              <li v-for="(group, indexs) in countryList" :key="indexs + 100" ref="listGroup">
                <!-- <h2 class="list-group-title">{{group.title}}</h2> -->
                <ul>
                  <li :class="[{ active: phoneCode == group.nationalCode }, 'list-group-item']" @click="goDetal(group.nationalCode, group.academyName)">
                    <span class="name">{{ group.academyName }}</span>
                    <!-- <span>(+{{item.code}})</span> -->
                  </li>
                </ul>
              </li>
            </ul>
            <div style="height:1.6rem"></div>
          </div>
        </scrollerEdit>
      </article>
      <div v-show="countryList.length == 0">
        <div class="noDataImage">
          <img src="~/static/nothing/empty_sousuojieguo.png" alt />
          <div class="describe">没有找到您想要的搜索结果</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import headerBack from '~/components/headerBack'
import scrollerEdit from '~/components/scrollerEdit'
import { getAcademys } from '~/api/selectCourse'
export default {
  data() {
    return {
      searchName: '',

      countryList: [],
      shortcut: [],
      phoneCode: '93',
      touch: {},
      listHeight: [],
      scrollY: -1,
      currentIndex: 0,
      diff: -1,
      fixedTop: -1,
    }
  },
  components: {
    scrollerEdit,
    headerBack,
  },
  created() {},
  computed: {
    fixedTitle() {
      return this.shortcut[this.currentIndex] ? this.shortcut[this.currentIndex] : 'A'
    },
  },
  mounted() {
    this.$visit(this.$route.path)
  },
  methods: {
    goDetal(code, schoolName) {
      this.phoneCode = code
      this.$router.push({
        path: 'schoolDetail?schoolCode=' + code + '&schoolName=' + schoolName,
      })
    },
    searchBtn(event) {
      if (event.keyCode == 13) {
        event.preventDefault() //禁止默认事件（默认是换行）
        this.getAcademys()
      }
    },
    getAcademys() {
      this.$loading('open')
      let obj = {
        name: this.searchName,
      }
      getAcademys(obj)
        .then((res) => {
          if (res.code == '0') {
            this.countryList = res.data
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    onScroll(pos) {
      this.scrollY = pos.top
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
.school-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.serach-box {
  height: 0.8rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  span {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    background: url('~/static/sprite/other_sprites.png') 0.42rem -0.55rem;
    background-size: 4.68rem 4.08rem;
  }
  input {
    font-size: 0.3rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222;
    // line-height:30px;
    padding-left: 0.3rem;
    box-sizing: border-box;
    outline: none;
    border: none;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
}
[v-cloak] {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  display: none;
}
body {
  /*火狐下隐藏滚动条*/
  overflow: -moz-scrollbars-none;
}
.country {
  position: fixed;
  left: 0;
  right: 0;
  top: 1.6rem;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #f7f7fa;
  z-index: 20;
  max-width: 640px;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}

.country-list h2 {
  padding: 4px 16px;
  color: #8a8a8f;
  line-height: 16px;
  font: 400 14px/16px SFProText-Regular;
}

.country-list ul {
  background: #fff;
  padding: 0 16px;
}

.list-group-item {
  padding: 12px 0 12px 0;
  border-bottom: 0.01rem solid #eeeeee;
  font: 16px/20px SFProText-Regular;
  user-select: none;
  cursor: pointer;
}

// .country-list ul li:last-child {
//   // border: none;
// }

.list-shortcut {
  position: fixed;
  z-index: 30;
  right: 0;
  padding-right: 8px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  background: #fff;
  user-select: none;
  cursor: pointer;
  width: 50px;
}
.selected-shortcut {
  position: fixed;
  top: 50%;
  left: 70%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  color: #fff;
  background: #dddce0;
  text-align: center;
  font: 500 20px/40px SFProText-Regular;
}
.list-shortcut .item {
  line-height: 16px;
  color: @mainColor;
  font-size: 12px;
  font-weight: 600;
}
.list-shortcut .selected {
  color: @mainColor;
  font-weight: 600;
}
.list-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 50%;
  background: #f7f7fa;
  padding: 4px 16px;
  color: #8a8a8f;
  line-height: 16px;
  font: 400 14px/16px SFProText-Regular;
  max-width: 640px;
  margin: 0 auto;
  transform: translateX(-50%);
}

@media (min-width: 640px) {
  .list-shortcut {
    right: 50%;
    margin-right: -320px;
  }

  .list-shortcut .item {
    padding: 0 10px;
  }
}

.noDataImage {
  text-align: center;
  padding-top: 2.4rem;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
</style>
